<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/sdmenu.css"/>
		<script type="text/javascript" src="js/tools.js"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			a,img {
				border: 0;
				text-decoration: none;
			}
			
			body {
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//获取所有的menuSpan
				var menuSpan = document.querySelectorAll(".menuSpan");
				
				//定义一个变量，来保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
				//为所有span绑定监听事件
				for(var i=0; i<menuSpan.length; i++){
					menuSpan[i].onclick = function(){
						var parentDiv = this.parentNode;
						
						toggleMenu(parentDiv);
						
						if(openDiv != parentDiv && !hasClass(openDiv , "collasped")){
							//在下一个打开之前，关闭上一个菜单
							//addClass(openDiv , "collapsed");
							//toggleClass(openDiv , "collapsed");
							toggleMenu(openDiv);
						}
						openDiv = parentDiv;
					};
					
					function toggleMenu(obj){
						//获取一个开始高度
						var begin = obj.offsetHeight;
						
						toggleClass(obj , "collapsed");
						
						//获取一下后来的高度
						var end = obj.offsetHeight;
						
						//console.log("begin = " +begin+"，end = "+end);						
						//把高度还原成原来的高度
						obj.style.height = begin +"px";
						
						//实现过渡
						move(obj , "height" , end , 10 , function(){
							obj.style.height = "";
							
						});
					}
				}
			};
		</script>
	</head>
	<body>
		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
	</body>
</html>
